<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>testHtml</title>
</head>
<body>
  <div id="app1"></div>
  <div id="app2">
    <my-child1></my-child1>
    <my-child2 name="child2" :age="123"></my-child2>
    <my-child3 name="child3">child3函数式组件</my-child3>
  </div>
  <script src="./dist/vue.js"></script>


</body>
<script>
  var vm1 = new Vue({
    data: {
      a: '1'
    },
    el: '#app1',
    template: '<div>{{ a }}</div>',
  })


  var child1 = {
    template: `<div>123</div>`
  }

  var child2 = {
    props: {
      name: String,
      age: {
        type: Number,
        default: '123'
      }
    },
    data(){
      return {
        age2: '20'
      }
    },
    template: `<div>{{name}}456年龄{{age2}}</div>`
  }

  var child3 = {
    functional: true,
    data() {
      return {
        b: '2'
      }
    },
    render: function(createElement, context) {
      return createElement('div', context.data, context.children)
    },
  }
  // var vm2 = new Vue({
  //   data: {
  //     a: '2',
  //     age2: '18'
  //   },
  //   el: '#app2',
  //   components: {
  //     'my-child1': child1,
  //     'my-child2': child2,
  //     'my-child3': child3
  //   }
  // })


  // console.log(vm1._uid)
</script>
</html>